<template>
  <div class="app-container">
    <el-row>
      <el-form :model="actSpecial" ref="actSpecial" label-width="100px" class="demo-ruleForm">
        <el-divider content-position="left"><legend class="divider-line">基本信息</legend></el-divider>
        <el-col :span="20">
          <el-form-item label="活动名称：">
            <div class="yxkj-word-black">{{ actSpecial.name }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="排序：">
            <div class="yxkj-word-black">{{ actSpecial.sortNum }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="应用渠道：">
            <div class="yxkj-word-black">{{ codeBox.CHANNEL[actSpecial.channel] }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="最低价格：">
            <div class="yxkj-word-black">{{ actSpecial.lowPrice }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="最低折扣：">
            <div class="yxkj-word-black">{{ actSpecial.lowDiscount }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="活动日期：">
            <div class="yxkj-word-black">{{ actSpecial.startTime }} - {{ actSpecial.endTime }}</div>
          </el-form-item>
        </el-col>

        <el-divider content-position="left"><legend class="divider-line">商品列表</legend></el-divider>

        <el-col :span="24">
            <el-table :data="dataList" border style="width: 100%">
              <el-table-column property="productName" width="500" label="商品"></el-table-column>
              <el-table-column property="sellerName" width="200" label="申请商家"></el-table-column>
              <el-table-column property="marketPrice" width="200" label="市场价"></el-table-column>
              <el-table-column property="mallPcPrice" width="150" label="PC价格"></el-table-column>
              <el-table-column property="malMobilePrice" width="150" label="移动端价格"></el-table-column>
              <el-table-column property="status" width="150" label="状态">
                <template slot-scope="scope">
                  {{ codeBox.SPECIAL_PRO_STATUS[scope.row.status] }}
                </template>
              </el-table-column>
              <el-table-column property="isTop" width="150" label="是否置顶">
                <template slot-scope="scope">
                  {{ codeBox.YES_NO[scope.row.isTop] }}
                </template>
              </el-table-column>
              <el-table-column property="sort" width="150" label="排序"></el-table-column>
              <el-table-column property="auditOpinion" width="200" label="审核意见"></el-table-column>
              <el-table-column property="auditTime" width="200" label="审核时间"></el-table-column>
              <el-table-column property="createTime" width="200" label="创建时间"></el-table-column>
            </el-table>
        </el-col>

        <el-divider content-position="left"><legend class="divider-line">专题活动相关图片</legend></el-divider>
        <el-col :span="24" style="margin-bottom: 60px;">
          <el-col :span="20">
            <el-form-item label="专题logo图片：">
              <img v-if="actSpecial.specialLogo" :src="$imagePath+actSpecial.specialLogo" class="avatar">
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="PC列表图片：">
              <img v-if="actSpecial.specialImage" :src="$imagePath+actSpecial.specialImage" class="avatar">
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="mobile列表图：">
              <img v-if="actSpecial.specialImageMobile" :src="$imagePath+actSpecial.specialImageMobile" class="avatar">
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="PC首页图片：">
              <img v-if="actSpecial.pcImage" :src="$imagePath+actSpecial.pcImage" class="avatar">
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="mobile首页图片：">
              <img v-if="actSpecial.mobileImage" :src="$imagePath+actSpecial.mobileImage" class="avatar">
            </el-form-item>
          </el-col>
        </el-col>

        <el-row :gutter="24">
          <div class="fixed-bottom-20">
              <el-button type="success" @click="back">返回</el-button>
          </div>
        </el-row>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import { detailActSpecial,listActSpecialProduct,sortActSpecial } from "@/api/promotion.js"
import { Message } from 'element-ui'
import { getCodeManager,codeToArray} from '@/api/all'
export default {
  name: "specialaudit",
  data() {
    return {
      id:'',
      channels: [],
      isTops: [],
      actSpecial: {},
      dataList: [],
      actSpecialProduct: {},
    };
  },
  created() {
    this.id = this.$route.query.id;
    getCodeManager('CHANNEL,SPECIAL_PRO_STATUS,YES_NO', () => {
       this.channels = codeToArray('CHANNEL');
       this.isTops = codeToArray('YES_NO');
    })
    detailActSpecial({ id: this.id }).then(res => {
      this.actSpecial = res.data.data.actSpecial
    });
    this.getList();
  },
  methods: {
    back() {
      history.back();
    },
    getList() {
      listActSpecialProduct({ actSpecialId: this.id }).then(response => {
        this.dataList = response.data.rows
      });
    }

  }

}
</script>
<style scoped>
  /deep/ .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  /deep/ .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  /deep/ [class*=el-col-] {
    float: none;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .add_norm {
    display: flex;

  }
  .add_norm .el-form-item {
    width: 35%
  }
  .add_norm .el-button {
    height: 36px;
    margin-left: 15px;
  }

  .el-divider {
    margin: 30px 0
  }
  .divider-line {
    font-size: 20px;
    font-weight: 300;
  }
  .avatar {
    display: block;
    height: 150px;
  }
</style>
